<template>
  <div align="center">
    <h1>业务员信息表</h1>
    <table border="1" cellspacing="0">
      <tr>
        <td>业务员名称</td>
        <td>业务员年龄</td>
        <td>业务员性别</td>
        <td>业务员工龄</td>
        <td>联系电话</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data">
        <td>{{ i.clerk_name }}</td>
        <td>{{ i.age }}</td>
        <td v-if="i.gender==0">{{ 男 }}</td>
        <td v-else>{{ 女 }}</td>
        <td>{{ i.seniority }}</td>
        <td>{{ i.phone }}</td>
        <td>
          <button @click="del(i.id)">删除</button>
          <button @click="amend(i.id)">修改</button>
        </td>
      </tr>
    </table>

    <br><br><br><br>

    <form action="" @submit.prevent="add" v-model="form">
      <p>业务员名称: <input type="text" v-model="form.clerk_name"></p>
      <p>业务员年龄: <input type="number" v-model="form.age"></p>
      <p>业务员性别: <input type="text" v-model="form.gender"></p>
      <p>业务员工龄: <input type="number" v-model="form.seniority"></p>
      <p>联系电话: <input type="number" v-model="form.phone"></p>
      <button type="submit">添加</button>
    </form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      form: {}
    }
  },
  methods: {
    btn() {
      this.axios.get('clerkM/')
        .then(res => {
          this.data = res.data
        })
    },
    add() {
      this.axios.post('clerkM/', this.form)
        .then(res => {
          alert('添加成功')
          this.form = {}
          this.btn()
        })
    },
    del(id) {
      this.axios.delete('clerkM/?id=' + id)
        .then(res => {
          alert('删除成功')
          this.btn()
        })
    },
    amend(id) {
      this.$router.push({'path': '/showClerk', query: {id: id}})
    }
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>
